<template>
  <uv-navbar :fixed="false" :title="title" left-arrow @leftClick="$onClickLeft" />
  <view class="container">
    <view class="bg-white">
      <!-- 标签页组件 -->
      <uv-tabs :list="tabList" :current="current" @change="change" keyName="name" :scrollable="false"></uv-tabs>
    </view>
    <view class="orders-list d-flex flex-column w-100" style="padding: 20rpx; padding-bottom: 0;">
      <!-- 订单项循环渲染 -->
      <view class="order-item" v-for="(item, index) in orders" :key="index" style="margin-bottom: 30rpx;">
        <list-cell :hover="false">
          <view class="w-100 d-flex align-items-center">
            <view class="flex-fill d-flex flex-column">
              <!-- 商店名称 -->
              <view class="font-size-lg text-color-base" style="margin-bottom: 20rpx;">
                {{ shopMap[item.mp_store_shop_id].name }}
              </view>
              <!-- 订单编号 -->
              <view class="font-size-sm text-color-assist">订单编号：{{ item.order_sn }}</view>
            </view>
            <!-- 订单状态 -->
            <view class="font-size-lg text-color-primary">
              {{ item.status }}
            </view>
          </view>
        </list-cell>
        <list-cell :hover="false" last>
          <view class="w-100 d-flex flex-column">
            <!-- 商品列表 -->
            <view class="w-100 text-truncate font-size-lg text-color-base" style="margin-bottom: 20rpx;">
              <view class="flex mb-2" v-for="(good, index) in cartMap[item.order_sn].list" :key="index">
                <image :src="good.image" mode="aspectFill" class="image"></image>
                <view class="flex flex-column">
                  <!-- 商品标题 -->
                  <view class="font-size-medium mt-1 text-color-base">{{ good.title }}</view>
                  <!-- 商品规格 -->
                  <view class="font-size-sm mt-1">份</view>
                  <!-- 商品数量与价格 -->
                  <view class="font-size-sm mt-2">×{{ good.number }}</view>
                </view>
              </view>
            </view>
            <view class="d-flex justify-content-between align-items-center" style="margin-bottom: 30rpx;">
              <!-- 下单时间 -->
              <view class="font-size-sm text-color-assist">
                {{ formatDateTime(item.created_at * 1000) }}
              </view>
              <!-- 商品总数 -->
              <view class="d-flex font-size-sm text-color-base align-items-center">
                <view style="margin-right: 10rpx;">共{{ goodsNum(cartMap[item.order_sn].list) }}件商品</view>
              </view>
            </view>
            <view class="d-flex align-items-center justify-content-end">
              <!-- 查看订单详情按钮 -->
              <button class="left-margin" plain size="mini" @tap="detail(item.order_sn)">订单详情</button>
            </view>
          </view>
        </list-cell>
      </view>
    </view>
    <!-- 无订单时显示空状态 -->
    <uv-empty v-if="orders.length === 0" mode="order"></uv-empty>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useMainStore } from '@/store/store'
import { storeToRefs } from 'pinia'
import { onLoad, onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app'
import { formatDateTime } from '@/utils/util'
import { orderGetOrders } from '@/api/order'

const main = useMainStore()
const { isLogin } = storeToRefs(main)

const title = ref('我的订单')
const page = ref(1)
const pageSize = ref(10)
const orders = ref([])
const shopMap = ref({})
const cartMap = ref({})

// 标签页数据
const tabList = ref([
  { type: -1, name: '全部' },
])
const current = ref(0)
const type = ref(-1)

// 计算商品总数
const goodsNum = computed(() => {
  return (goods) => {
    return goods.reduce((total, good) => total + parseInt(good.number), 0)
  }
})

// 页面加载时获取订单数据
onLoad(() => {
  if (!isLogin.value) {
    uni.navigateTo({ url: '/pages/components/pages/login/login' })
  }
  getOrders(false)
})

// 下拉刷新时重新获取订单数据
onPullDownRefresh(() => {
  getOrders(true)
})

// 滚动到底部时加载更多订单数据
onReachBottom(() => {
  getOrders(false)
})

// 切换标签页时更新订单类型并重新获取数据
const change = (e) => {
  type.value = e.type
  getOrders(true)
}

// 获取订单数据
const getOrders = async (isRefresh = false) => {
  uni.showLoading({ title: '加载中' })
  if (isRefresh) {
    orders.value = []
    page.value = 1
  }
  const ordersData = await orderGetOrders({
    page: page.value,
    limit: pageSize.value,
    type: type.value
  })
  if (ordersData && ordersData.list) {
    orders.value = orders.value.concat(ordersData.list)
    page.value += 1
    for (let key in ordersData.shop_map) {
      shopMap.value[key] = ordersData.shop_map[key]
    }
    for (let key in ordersData.cart_map) {
      cartMap.value[key] = ordersData.cart_map[key]
    }
  }
  uni.stopPullDownRefresh()
  uni.hideLoading()
}

// 跳转到订单详情页面
const detail = (id) => {
  uni.navigateTo({ url: `/pages/components/pages/orders/detail?id=${id}` })
}
</script>

<style lang="scss" scoped>
.left-margin {
  margin-left: 10rpx;
}

.image {
  width: 160rpx;
  height: 160rpx;
  margin-right: 30rpx;
  border-radius: 8rpx;
}
</style>
